<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>USERDETAIL</title>

    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css"
          th:href="@{/LoginStyle/css/bootstrap.min.css}">

    <!-- Customizable CSS -->
    <link rel="stylesheet" href="assets/css/main.css" th:href="@{/indexStyle/css/main.css}">
    <link rel="stylesheet" href="assets/css/blue.css" th:href="@{/indexStyle/css/blue.css}">
    <link rel="stylesheet" href="assets/css/owl.carousel.css" th:href="@{/indexStyle/css/owl.carousel.css}">
    <link rel="stylesheet" href="assets/css/owl.transitions.css" th:href="@{/indexStyle/css/owl.transitions.css}">
    <link rel="stylesheet" href="assets/css/animate.min.css" th:href="@{/indexStyle/css/animate.min.css}">
    <link rel="stylesheet" href="assets/css/rateit.css" th:href="@{/indexStyle/css/rateit.css}">
    <link rel="stylesheet" href="assets/css/bootstrap-select.min.css"
          th:href="@{/indexStyle/css/bootstrap-select.min.css}">
    <link rel="stylesheet" href="button.css" th:href="@{/indexStyle/css/button.css}">

    <!-- Icons/Glyphs -->
    <link rel="stylesheet" href="assets/css/font-awesome.css" th:href="@{/indexStyle/css/font-awesome.css}">
    <style>
        .no-padding {
            padding: 0;
        }

        .top-box {
            height: 35px;
            line-height: 35px;
            margin-bottom: 20px;
            background-color: skyblue;
        }

        .top-box li {
            float: left;
            text-align: center;
        }

        .check-top {
            height: 35px;
            text-align: left !important;
            padding: 0;
        }

        .check-top input {
            margin: 0 10px;
            padding: 0;
        }

        .goods {
            height: 116px;
            text-align: center;
            margin-bottom: 20px;
            background-color: #fff;
        }

        .goods img {
            float: right;
            padding-top: 15px;
            height: 104px;
            width: 84px;
        }

        .goods li {
            float: left;
            padding: 0;
        }

        .pdc-span {
            height: 55px;
            text-align: left;
            padding-top: 5px;
        }

        .pdc-span h5 {
            font-size: 15px;
            font-weight: 700;
        }

        .half-h {
            line-height: 115px;
        }

        .half-h-min {
            line-height: 20px;
        }

        .bankuang-left {
            float: left;
            height: 20px;
            width: 30px;
            text-align: center;
            border: 1px solid #BBBBBB;
        }

        .bg-color {
            background-color: #E8E8E8;
        }

        .bor-left {
            border-left: 1px solid #BBBBBB;
        }

        .botm-box {
            height: 50px;
            line-height: 50px;
            background-color: skyblue;
        }

        .price-box {
            font-weight: 700;
        }

        .red {
            color: red;
        }

        .button {
            position: relative;
        }

        .bc-box {
            position: absolute;
            top: 10px;
            left: 3px;
        }

        .center-lab {
            margin-top: 50px;
        }

        .up,
        .down {
            cursor: pointer;
        }
    </style>
</head>

<body class="cnt-home">
<header th:replace="~{user/fragment/IndexHeader:: indexHeader}"></header>
<div class="body-content outer-top-xs">
    <div class='container'>
        <div class='row'>
            <div class='col-xs-12 col-sm-12 col-md-3 sidebar'>
                <!-- ================================== TOP NAVIGATION ================================== -->
                <div class="side-menu animate-dropdown outer-bottom-xs">
                    <div class="head"><i class="icon fa fa-align-justify fa-fw"></i> 账户管理</div>
                    <nav class="yamm megamenu-horizontal">
                        <ul class="nav">
                            <li>
                                <a href="userdetail.html" class="dropdown-toggle " th:href="@{/User/userdetail}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>个人信息</a>
                            </li>
                            <li>
                                <a href="useraddress.html" class="dropdown-toggle " th:href="@{/User/useraddress}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>收货地址</a>
                            </li>
                            <li>
                                <a href="userwishlist.html" class="dropdown-toggle" th:href="@{/User/userwishlist}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>收藏</a>
                            </li>
                            <li>
                                <a href="usercart.html" class="dropdown-toggle active" th:href="@{/User/usercart}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>购物车</a>
                            </li>
                            <li>
                                <a href="changepwd.html" class="dropdown-toggle" th:href="@{/User/changepwd}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>更改密码</a>
                            </li>
                            <li>
                                <a href="userorder.html" class="dropdown-toggle " th:href="@{/User/userorder}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>订单</a>
                            </li>
                        </ul>
                        <!-- /.nav -->
                    </nav>
                    <!-- /.megamenu-horizontal -->
                </div>
                <!-- /.side-menu -->
            </div>
            <div class="col-xs-12 col-sm-12 col-md-9">
                <div class="top-box row">
                    <ul>
                        <li class="check-top col-xs-2 col-md-1">
                            <input type="checkbox" name="" id="checkall1"><span>全选</span>
                        </li>
                        <li class="col-xs-4 col-md-4">商品</li>
                        <li class="hidden-xs col-md-2">单价</li>
                        <li class="col-xs-2 col-md-2">数量</li>
                        <li class="col-xs-2 col-md-2">金额</li>
                        <li class="col-xs-2 col-md-1">操作</li>
                    </ul>
                </div>
                <div class="row goods" th:each="userCart:${userCartList}">
                    <ul>
                        <li class="col-xs-2 col-md-1 half-h">
                            <input type="checkbox" name="" class="mincheck">
                        </li>
                        <li class="col-xs-4 col-md-4">
                            <div class="row">
                                <div class="col-md-4 hidden-xs no-padding">
                                    <img src="assets\images\products\p1.jpg" th:src="@{${userCart.goodsPicture}}"
                                         alt="图片">
                                </div>
                                <div class="row col-md-6 col-xs-12">
                                    <div class="col-md-12 col-xs-12 pdc-span">
                                        <h5 id="goodsName" th:id="${userCart.rid}" th:text="${userCart.goodsName}">
                                            java基础</h5>
                                    </div>
                                    <div class="col-md-12 col-xs-12 pdc-span">
                                        <span>商家:</span>
                                        <span id="storeName" th:text="${userCart.storeName}">xxxxxxxxx店铺</span></div>
                                </div>
                            </div>
                        </li>
                        <li class="hidden-xs col-md-2 half-h bor-left p-price">
                            <label>
                                <span>￥</span>
                                <span class="number" th:text="${userCart.price}">100000.00</span>
                            </label>
                        </li>
                        <li class="col-xs-2 col-md-2 half-h bor-left">
                            <label class="half-h-min center-lab">
                                <span class="bankuang-left bg-color hidden-xs down">-</span>
                                <input class="bankuang-left itxt" type="text" th:value="${userCart.count}" value="1">
                                <span class="bankuang-left bg-color hidden-xs up">+</span>
                            </label>
                        </li>
                        <li class="col-xs-2 col-md-2 half-h bor-left t-price">
                            <label>
                                <span>￥</span>
                                <span class="number">1.00</span>
                            </label>
                        </li>
                        <li class="col-xs-2 col-md-1 half-h bor-left">
                            <a href="#" class="delete">删除</a>
                        </li>
                    </ul>
                </div>
                <div class="botm-box row">
                    <div class="check-top hidden-xs col-md-1">
                        <input type="checkbox" name="" id="checkall2"><span>全选</span>
                    </div>
                    <div class="price-box col-md-2 col-md-offset-5 col-xs-3">
                        <div>已选<span id="goods-count">0</span>件商品</div>
                    </div>
                    <div class="price-box col-md-2 col-xs-5">
                        <div>总价:￥<span id="total" class="red">10086.00</span></div>
                    </div>
                    <div class="button  col-md-2 col-md-offset-1 col-xs-3 col-xs-offset-2">
                        <a class="bc-box" id="submit" href="#">提交订单</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery 3 -->
<script src="../../bower_components/jquery/dist/jquery.min.js" th:src="@{/LoginStyle/js/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"
        th:src="@{/LoginStyle/js/bootstrap.min.js}"></script>
<script src="assets/js/bootstrap-hover-dropdown.min.js"
        th:src="@{/indexStyle/js/bootstrap-hover-dropdown.min.js}"></script>
<script src="assets/js/owl.carousel.min.js" th:src="@{/indexStyle/js/owl.carousel.min.js}"></script>
<script src="assets/js/echo.min.js" th:src="@{/indexStyle/js/echo.min.js}"></script>
<script src="assets/js/jquery.easing-1.3.min.js" th:src="@{/indexStyle/js/jquery.easing-1.3.min.js}"></script>
<script src="assets/js/bootstrap-slider.min.js" th:src="@{/indexStyle/js/bootstrap-slider.min.js}"></script>
<script src="assets/js/jquery.rateit.min.js" th:src="@{/indexStyle/js/jquery.rateit.min.js}"></script>
<script src="assets/js/lightbox.min.js" th:src="@{/indexStyle/js/lightbox.min.js}"></script>
<script src="assets/js/bootstrap-select.min.js" th:src="@{/indexStyle/js/bootstrap-select.min.js}"></script>
<script src="assets/js/wow.min.js" th:src="@{/indexStyle/js/wow.min.js}"></script>
<script src="assets/js/scripts.js" th:src="@{/indexStyle/js/scripts.js}"></script>
<script th:src="@{/indexStyle/js/indexHeader.js}"></script>
<script th:inline="javascript">
    var flag = false;//判断数量改变
    var ChangeIdAndVal = new Map();//存储改变id和值
    function TotalPrice() {
        var price = 0;
        if ($(".mincheck:checked").length > 0) {
            $(".mincheck:checked").each(function (i, element) {
                price += parseFloat($(element).parent().siblings(".t-price").children().children(".number").text());
                // console.log(price);
                var number = price.toFixed(2);
                $("#total").text(number);
            });
        } else $("#total").text("0.00");

    }

    $(function () {
        TotalPrice();
        var value = 0;
        var number = 0;
        var price = "";
        $(".itxt").each(function (i, element) {
            value = $(element).val();
            number = $(element).parent().parent().siblings(".p-price").children().children(".number").text();
            number = number * value;
            price = number.toFixed(2);
            $(element).parent().parent().siblings(".t-price").children().children(".number").text(price);
        });
    });
    $(document).ready(function () {
        $("#checkall1").change(function () {//全选状态改变
            // console.log( $(this).prop("checked"));
            $(".mincheck").prop("checked", $(this).prop("checked"));
            $("#checkall2").prop("checked", $(this).prop("checked"));
            $("#goods-count").text($(".mincheck:checked").length);
            TotalPrice();
        });

        $(".mincheck").change(function () {
            if ($(".mincheck:checked").length == $(".mincheck").length) {
                $("#checkall1").prop("checked", true);
                $("#checkall2").prop("checked", true);
            } else {
                $("#checkall1").prop("checked", false);
                $("#checkall2").prop("checked", false);
            }
            $("#goods-count").text($(".mincheck:checked").length);
            TotalPrice();
        });

        $("#checkall2").change(function () {//全选状态改变
            // console.log( $(this).prop("checked"));
            $(".mincheck").prop("checked", $(this).prop("checked"));
            $("#checkall1").prop("checked", $(this).prop("checked"));
            $("#goods-count").text($(".mincheck:checked").length);
            TotalPrice();
        });

        $(".itxt").change(function () {
            var value = $(this).val();
            var rid = $(this).parent().parent().siblings().children().children().children().children("h5").prop("id");
            ChangeIdAndVal.set(rid, value);
            console.log(ChangeIdAndVal);
            var number = $(this).parent().parent().siblings(".p-price").children().children(".number").text();
            number = number * value;
            number = number.toFixed(2);
            $(this).parent().parent().siblings(".t-price").children().children(".number").text(number);
            flag = true;
        });

        $(".up").click(function () {
            var value = $(this).siblings(".itxt").val();
            var rid = $(this).parent().parent().siblings().children().children().children().children("h5").prop("id");
            // console.log(value);
            value = ++value;
            $(this).siblings(".itxt").val(value);
            ChangeIdAndVal.set(rid, value);
            console.log(ChangeIdAndVal);
            var number = $(this).parent().parent().siblings(".p-price").children().children(".number").text();
            number = number * value;
            number = number.toFixed(2);
            $(this).parent().parent().siblings(".t-price").children().children(".number").text(number);
            flag = true;
        });

        $(".down").click(function () {
            var value = $(this).siblings(".itxt").val();
            var rid = $(this).parent().parent().siblings().children().children().children().children("h5").prop("id");
            if (value > 0) {
                // console.log(value);
                value = --value;
                $(this).siblings(".itxt").val(value);
                ChangeIdAndVal.set(rid, value);
                console.log(ChangeIdAndVal);
                var number = $(this).parent().parent().siblings(".p-price").children().children(".number").text();
                number = number * value;
                number = number.toFixed(2);
                $(this).parent().parent().siblings(".t-price").children().children(".number").text(number);
                flag = true;
            }
        });

        $(".delete").click(function () {
            var id = $(this).parent().siblings().children().children().siblings().children().children("h5").prop("id");
            // console.log(id);
            $.ajax({
                type: "post",
                url: "/User/DeleteCart/data",
                data: {
                    id: id
                },
                success: function (data) {
                    console.log("删除成功？" + data);
                    window.location.href = "/User/usercart";
                }
            });
        });

        $("#submit").click(function () {
            if (flag) {
                let obj = Object.create(null);//将map转化为json可用对象
                for (let [k, v] of ChangeIdAndVal) {
                    obj[k] = v;
                }

                $.ajax({
                    type: "post",
                    url: "/User/updateUserCart/data",
                    contentType: 'application/json;charset=utf-8',
                    data: JSON.stringify(obj),//前台要封装成json格式
                    dataType: "text",
                    success: function (data) {
                        console.log("更新订单成功？" + data);
                        window.location.reload();
                    }
                });
            }
            let myArray = [];
            if ($(".mincheck:checked").length > 0) {
                $(".mincheck:checked").each(function (i, element) {
                    myArray[i] = $(element).parent().next().children().children().siblings().children().children("h5").prop("id");
                    console.log(myArray);
                });
                $.ajax({
                    type: "post",
                    dataType: 'text',
                    url: "/User/CartCreatOrder/data",
                    contentType: 'application/json',//这个必须是这个格式
                    data: JSON.stringify(myArray),//前台要封装成json格式
                    success: function (data) {
                        console.log("订单创建成功？" + data);
                        window.location.href = "/User/pay";
                    }
                });
            } else
                return false;
        });
    });
</script>
</body>

</html>